<template>
	<div class="relocation-manager-info">
		<div class="main_content">
			<div class="main_content_title">
				<div class="left">
					<span>{{ propUpType === 'add' ? $t('publicBtn.add') : propUpType === 'edit' ? $t('publicBtn.edit') :
						$t('publicBtn.detail') }}</span>
					<template v-for="(item, index) in $route.meta.title">
						<span v-if="languageId === item.langId">{{ item.name }}</span>
					</template>
				</div>
				<div class="right">
					<el-button type="primary" size="mini" @click="addData" v-if="propUpType !== 'detail'">新增</el-button>
				</div>
			</div>
			<div class="main_content_con">
				<el-form :model="forms" ref="forms" :rules="rulesCars" label-width="5px" class="demo-dynamic">
					<div class="content_info">
						<template v-if="propUpType === 'detail'">
							<el-row :gutter="24">
								<el-col :span="8">
									<el-form-item label="移库单号" label-width="70px">
										<el-input readonly :value="info.moveOrder" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="移库数量" label-width="70px">
										<el-input readonly :value="info.moveNum" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="移库时间" label-width="70px">
										<el-input readonly :value="info.createTime" />
									</el-form-item>
								</el-col>
							</el-row>
							<div class="line" />
						</template>

						<el-table :data="forms.inventoryList" border style="width: 98%;overflow-x: auto;">
							<el-table-column label="品牌" align="center" prop="brandName" />
							<el-table-column label="车系" align="center" prop="seriesName" />
							<el-table-column label="年款" align="center" prop="carYear" />
							<el-table-column label="车型" align="center" prop="modelName" />
							<el-table-column label="外观颜色" align="center" prop="outsideColour" />
							<el-table-column label="内饰颜色" align="center" prop="insideColour" />
							<el-table-column label="选装包" align="center" prop="retrofittingName" />
							<el-table-column label="VIN码" align="center" prop="vinNumber" width="200px" />
							<el-table-column label="所在仓库" align="center" prop="originalName" />
							<el-table-column label="移至库" align="center" min-width="150px" v-if="propUpType === 'add'">
								<template slot-scope="scope">
									<el-form-item label=" " :key="scope.$index" :prop="'inventoryList.' + scope.$index + '.warehouseId'"
										:rules="rulesCars.warehouseId">
										<el-select v-model="scope.row.warehouseId" clearable filterable placeholder="请选择" style="width:92%"
											@change="getWarehouseId($event, scope.$index, scope.row.originalId, scope.row.originalName)">
											<el-option v-for="item in warehouseList" :key="item.id"
												:label="item.isSecond === 0 ? item.name + ' (新车库) ' : item.name + '(二手车库)'" :value="item.id">
											</el-option>
										</el-select>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column label="操作" align="center" width="100px" v-if="propUpType === 'add'">
								<template slot-scope="scope">
									<el-form-item>
										<el-button size="mini" type="danger" @click.native.prevent="deleteRow(scope.$index)">删除</el-button>
									</el-form-item>
								</template>
							</el-table-column>
							<!-- 详情 -->
							<el-table-column label="移至库" align="center" prop="warehouseName" v-if="propUpType === 'detail'" />
						</el-table>
						<div class="line" />
						<!-- 审批流程  propup_type :1 add  2 detail -->
						<approvalProcessDetails v-if="propUpType === 'add'" :type=19 :propup_type=1 :list='approveList'>
						</approvalProcessDetails>

						<!-- 审批详情 -->
						<approvalProcessDetails v-if="propUpType === 'detail'" :type=19 :propup_type=2 :list='approveList'>
						</approvalProcessDetails>
					</div>
					<div class="footerBtn">
						<el-button @click="getCancle">{{ propUpType !== 'detail' ? '取 消' : '关 闭' }}</el-button>
						<el-button v-if="propUpType !== 'detail'" type="primary" @click="addSubmitForm"
							v-loading.fullscreen.lock="fullscreenLoading">确 定</el-button>
					</div>
				</el-form>
			</div>
		</div>

		<!-- 选择库存 -->
		<relocation ref="relocation"></relocation>

	</div>
</template>
<script>
// import {
// 	getStockMoveInfo,
// 	getStockMoveSave
// } from '@/api/commercial-vehicle-manager'
import { getPresaleAttributeList } from '@/api/public'
import approvalProcessDetails from '@/components/approval-process-details'
import relocation from '@/components/relocation-select'
import defaultSettings from '@/settings'
export default {
	name: 'RelocationManagerInfo',
	components: {
		relocation,
		approvalProcessDetails //审批
	},
	data() {
		return {
			BASE_IMG: defaultSettings.BASE_IMG,
			propUpType: '', // 'add' edit detail
			fullscreenLoading: false,
			info: {},
			// 移库明细
			forms: {
				inventoryList: []
			},
			warehouseList: [], //仓库列表
			rulesCars: {
				warehouseId: [
					{
						required: true,
						message: '请选择仓库',
						trigger: 'change'
					}
				]
			},
			approveList: [] //详情返回审批
		}
	},
	computed: {
		languageId() {
			// 固定语种ID  1:中文  2:英文 3:俄文 4:乌语
			return this.$store.getters.languageId
		}
	},
	watch: {},
	mounted() {
		window._vm = this
	},
	created() {
		console.log('created')
		this.propUpType = this.$route.query.propUpType
		if (this.$route.query.propUpType === 'add') {
			var arr = JSON.parse(this.$route.query.data)
			this.forms.inventoryList = arr
			this.getPresaleAttributeListData(19) //仓库
		} else if (this.$route.query.id) {
			this.getInfo(this.$route.query.id)
		}
	},

	activated() { },

	destroyed() { },
	methods: {
		getWarehouseId(val, index, oldId, oldName) {
			// console.log(val, index, oldId, oldName,'val, oldId, index')
			if (oldId === val) {
				this.$message({
					message: '移至库与所在库重复!',
					type: 'error'
				})
				this.forms.inventoryList[index].warehouseId = ''
				return false
			}
		},
		addData() {
			var ids = []
			if (this.forms.inventoryList.length > 0) {
				this.forms.inventoryList.map(i => {
					ids.push(i.id)
				})
			}
			this.$refs.relocation.getOpen(JSON.stringify(ids))
		},

		getSelectData(tar) {
			var arr = JSON.parse(tar)
			arr.map(i => {
				this.forms.inventoryList.push(i)
			})
		},

		getPresaleAttributeListData(ids) {
			getPresaleAttributeList(ids).then(res => {
				if (res.code === 200) {
					this.warehouseList = res.data.warehouseList
				}
			})
		},
		deleteRow(index) {
			this.forms.inventoryList.splice(index, 1)
		},

		// 提交
		addSubmitForm() {
			this.$refs['forms'].validate(valid => {
				if (valid) {
					this.fullscreenLoading = true
					var list = this.forms.inventoryList
					var arr = []
					list.map(i => {
						var obj = {
							stockId: i.id,
							warehouseId: i.warehouseId,
							originalId: i.originalId
						}
						arr.push(obj)
					})
					var params = {
						moveNum: arr.length,
						inventoryList: arr //移库明细
					}
					getStockMoveSave(params)
						.then(res => {
							if (res.code === 200) {
								this.$message({
									showClose: true,
									message: '添加成功',
									type: 'success'
								})
								this.fullscreenLoading = false
								this.getCancle()
							}
						})
						.catch(err => {
							this.fullscreenLoading = false
							console.log(err, 'err')
						})
				} else {
					return false
				}
			})
		},
		// 详情
		getInfo(id) {
			getStockMoveInfo(id).then(res => {
				if (res.code === 200) {
					var obj = res.data
					if (obj.recordInfo.processInfo) {
						this.approveList = obj.recordInfo.processInfo
					}
					if (obj.inventoryList) {
						this.forms.inventoryList = obj.inventoryList
					} else {
						this.forms.inventoryList = []
					}
					this.info = res.data
				}
			})
		},
		// 取消
		getCancle() {
			this.$store.state.tagsView.visitedViews.splice(
				this.$store.state.tagsView.visitedViews.findIndex(
					item => item.path === this.$route.path
				),
				1
			)
			this.$router.go(-1)
		}
	}
}
</script>
<style lang="scss" scoped>
.relocation-manager-info {
	height: 100%;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	overflow: hidden;

	&>.main_content {
		width: 99.9%;
		height: 100%;

		&>.main_content_title {
			margin-bottom: 10px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.main_content_con {
			height: calc(100% - 40px);
			width: 100%;
			display: inline-block;
			border: 1px solid #dfe6ec;
			padding: 20px;
			overflow: hidden;

			.el-table {
				::v-deep th {
					background-color: #f2f2f2;
				}

				::v-deep .cell {
					display: flex;
					text-align: center;
					justify-content: center;
				}

				.el-form-item {
					width: 100%;
				}

				.el-dropdown {
					cursor: pointer;
				}
			}

			&>.el-form {
				width: 100%;
				height: 100%;

				&>.content_info {
					width: 100%;
					height: calc(100% - 40px);
					overflow: hidden;
					overflow-y: auto;
				}

				::v-deep input::-webkit-outer-spin-button,
				::v-deep input::-webkit-inner-spin-button {
					-webkit-appearance: none !important;
				}

				::v-deep input[type='number'] {
					-moz-appearance: textfield;
				}

				.footerBtn {
					width: 100%;
					display: flex;
					justify-content: center;
				}
			}

			.line {
				height: 1px;
				margin: 25px 0;
				background: #ebeef5;
			}

			.carDetails {
				width: 98%;
				margin-bottom: 20px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&>div {
					width: auto;
				}
			}

			.demo-dynamic {
				::v-deep .el-form-item__error {
					left: 8%;
				}
			}

			.el-button:hover,
			.el-button:focus {
				color: #000;
			}
		}
	}
}
</style>
